<template>
  <page-view class="register">
    <page-header title="注册" :show-back="true"></page-header>
    <div class="content-box">
      <van-form ref="registerForm">
        <van-cell-group inset>
          <van-field
            v-model="userInfoForm.nickName"
            name="nickName"
            label="昵称"
            placeholder="昵称"
            :rules="[
              { required: true, message: '请填写昵称', trigger: 'onBlur' },
              {
                validator: validatorNick,
                message: '昵称不可用',
                trigger: 'onBlur',
              },
            ]"
          />
          <van-field
            v-model="userInfoForm.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[
              { required: true, message: '请填写密码', trigger: 'onBlur' },
              { validator: validatorPassword },
            ]"
          />
          <van-field
            v-model="userInfoForm.confirm_pwd"
            type="password"
            name="confirm_pwd"
            label="确认密码"
            placeholder="确认密码"
            :rules="[
              { required: true, message: '请填写确认密码', trigger: 'onBlur' },
              { validator: validatorConfirm_pwd },
            ]"
          />
          <van-field
            v-model="userInfoForm.user_phone"
            type="text"
            name="user_phone"
            label="手机号码"
            placeholder="手机号码"
            :rules="[
              { required: true, message: '请填写手机号码', trigger: 'onBlur' },
              { pattern: validatorPhone, message: '手机号码格式不对' },
            ]"
          />
          <van-field
            v-model="userInfoForm.user_email"
            type="email"
            name="user_email"
            label="电子邮箱"
            placeholder="电子邮箱"
            :rules="[
              { required: true, message: '请填写电子邮箱', trigger: 'onBlur' },
            ]"
          />
          <van-field name="user_sex" label="性别">
            <template #input>
              <van-radio-group
                v-model="userInfoForm.user_sex"
                direction="horizontal"
              >
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </div>
  </page-view>
</template>

<script setup>
import { reactive, ref } from "vue";

const userInfoForm = reactive({
  nickName: "",
  password: "",
  confirm_pwd: "",
  user_phone: "",
  user_email: "",
  user_sex: "1",
});

const validatorNick = async () => {};
const validatorPhone = /^1([358][0-9]|4[678]|7[123])[0-9]{8}$/;
const validatorPassword = (val) => {
  if (val.length < 6 || val.length > 18)
    return "密码的长度不对，需要再6-18位之间";
};
const validatorConfirm_pwd = (val) => {
  if (userInfoForm.password != userInfoForm.confirm_pwd)
    return "两次输入的密码不一致";
};
</script>

<style lang="scss" scoped>
</style>